<!--
 * @author: Spring
 * @create: 2021-06-17 15:27 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-30 19:39 PM
 * @desc: 
-->
<template>
  <div class="home" @mousewheel="scoll()">
    <!-- <login /> -->
    <!-- <Secondnav /> -->
    <div class="secnav-conter">
      <publicnav v-show="pubnav" />
      <div class="sec-wrap">
        <Secondnav @secarClick="secarClick" />
      </div>
    </div>
    <div class="tagnav">
      <Tagnav
        :twonav="tagnavdata"
        :alldata="allnavdata"
        @showmor="showmor"
        :tagnone="tagnone"
        :showmnone="showmnone"
      />
    </div>

    <div class="body-conter" ref="bodycon">
      <!-- 热门、榜单、最热 -->
      <div class="body-wrap">
        <Threenav @thecards="thecarde" />
        <Hot :hottag="hottag" :data="data" />
        <Hotitem :hottag="hottag" :data="hotitemdata" />
      </div>
      <!-- 右侧 -->
      <div class="body-rigth">
        <Log v-show="logshow"/>
        <Advert ref="advt" />
        <Intro ref="intro" />
        <Authoe />
        <Address />
      </div>
    </div>
  </div>
</template>

<script>
// import Login from "@/components/Login.vue"
import Secondnav from "@/components/Secondnav/Secondnav.vue";
import Tagnav from "@/components/Secondnav/Tagnav.vue";
import publicnav from "@/components/PublicNav";
import Threenav from "@/components/Indpage/Threenav.vue";
import Hot from "@/components/Indpage/Recommend/Hot.vue";
import Hotitem from "@/components/Indpage/Recommend/Hotitem.vue";
import Log from "@/components/Unloginrside/Log.vue";
import Advert from "@/components/Unloginrside/Advert.vue";
import Intro from "@/components/Unloginrside/Intro.vue";
import Authoe from "@/components/Unloginrside/Authoe.vue";
import Address from "@/components/Unloginrside/Address.vue";
import { hot } from "/utils/api.js";

export default {
  name: "Home",
  components: {
    // Login,
    Secondnav,
    publicnav,
    Threenav,
    Hot,
    Hotitem,
    Tagnav,
    Log,
    Advert,
    Intro,
    Authoe,
    Address,
  },
  data() {
    return {
      logshow:true,
      hottag: "none",
      allnavdata: [],
      tagnavdata: [],
      indpage: 1,
      pubnav: true,
      tagnone: "none",
      //数据请求状态
      dastate: false,
      indpage: 10,
      showmnone: true,
      data: [
        {
          nick_name: "沸点小助手",
          time: "1天前",
          tag: ["前端", "JavaScript"],
          title: "java主题月|掘金密卷之java月考",
          info: "java主题月来到尾声了，我们准备了一些题目，看看大家对java的知识还记得多少呢？一起来答题把~",
          img: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1602c6796cc46dfa201834697b7e96a~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp",
        },
      ],
      hotitemdata: [
        {
          nick_name: "前端早早聊",
          time: "1天前",
          tags: ["前端", "JavaScript"],
          title: "java主题月|掘金密卷之java月考",
          desc: "java主题月来到尾声了，我们准备了一些题目，看看大家对java的知识还记得多少呢？一起来答题把~",
          img: "",
        },
        {
          nick_name: "程序员13",
          time: "1天前",
          tags: ["前端", "JavaScript"],
          title: "java主题月|掘金密卷之java月考",
          desc: "java主题月来到尾声了，我们准备了一些题目，看看大家对java的知识还记得多少呢？一起来答题把~",
          img: "",
        },
      ], 
    };
  },
  methods: {
    thecarde(e) {
      if (e.target.innerHTML == "最新") {
        console.log(123);
      }
    },
    secarClick(e, doc) {
      this.tagnavdata = e.slice(0, 9);
      this.allnavdata = e;
      let ite = document.querySelectorAll(".secard");
      if (ite[0].innerHTML.slice(0, 3) == doc.target.innerHTML.slice(0, 3)) {
        this.tagnone = "none";
      } else {
        this.tagnone = "flex";
        this.showmnone = true;
      }
      console.log(this.showmnone);
    },
    showmor(data) {
      this.showmnone = false;
      this.tagnavdata = data;
    },
    //懒加载
    scoll() {
      if (
        window.pageYOffset > (this.$refs.bodycon.scrollHeight - 800) / 2 &&
        this.dastate == false
      ) {
        this.indpage++;
        hot({ type: 1, page: this.indpage }).then((res) => {
          console.log("新数据" + res.data);
          this.dastate = true;
          res.data.data.forEach((ele) => {
            let b = new Date().getTime() - ele.updated_at * 1000;
            let a = Math.ceil((b % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            if (a > 12) {
              ele.updated_at = Math.floor(a / 12) + "天前";
            } else {
              ele.updated_at = a + "小时前";
            }
            if (ele.nick_name == null) {
              ele.nick_name = "程序员13";
            }
            if (ele.title == null) {
              ele.title = "阿里巴巴：服务化管理7000+ 个项目组件资产";
            }
            if (ele.pic == null) {
              ele.pic =
                "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1602c6796cc46dfa201834697b7e96a~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp";
            }
            if (ele.tags.length > 0) {
              this.hottag = "flex";
            }
            if (this.indpage > res.data.count) {
              this.$message("已经到底了");
            }
            this.hotitemdata.push(ele);
            this.dastate = false;
          });
        });
      }
      if (window.pageYOffset > 1520) {
        this.$refs.advt.$el.style.cssText =
          "position: sticky;top:80px; z-index: 1000;";
        this.$refs.intro.$el.style.cssText =
          "position: sticky;top:512px;z-index: 1000;";
      } else {
        this.$refs.intro.$el.style.position = "";
        this.$refs.advt.$el.style.position = "";
      }
      if (window.pageYOffset > 500) {
        this.pubnav = false;
      } else {
        this.pubnav = true;
      }
    },
  },
  updated(){
    //判断是否登录
    if(localStorage.getItem("token")){
       this.logshow = false;
    }else{
      this.logshow = true;
    }
  },
  mounted() {
    // user_id: 555
    hot({ type: 1,user_id: 555 }).then((res) => {
      console.log(res);
      res.data.data.forEach((ele) => {
        let b = new Date().getTime() - ele.updated_at * 1000;
        let a = Math.ceil((b % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        if (a > 12) {
          ele.updated_at = Math.floor(a / 12) + "天前";
        } else {
          ele.updated_at = a + "小时前";
        }
        if (ele.nick_name == null) {
          ele.nick_name = "程序员13";
        }
        if (ele.title == null) {
          ele.title = "阿里巴巴：服务化管理7000+ 个项目组件资产";
        }
        if (ele.pic == null) {
          ele.pic =
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1602c6796cc46dfa201834697b7e96a~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp";
        } else {
          ele.pic = "http://api_devss.wanxikeji.cn/" + ele.pic;
        }

        if (ele.tags.length > 0) {
          this.hottag = "flex";
        }
        this.data = res.data.data.slice(0, 1);
        this.hotitemdata = res.data.data.slice(1, 10);
      });
      console.log(res.data.data);
    });
  },
};
</script>
<style lang="scss" scoped>
.home {
  .secnav-conter {
    width: 100%;
    top: 0;
    position: sticky;
    z-index: 100;
    background-color: #fff;
    .sec-wrap {
      background-color: #fff;
      width: 960px;
      margin: auto;
      @include flex(space-between);
      position: relative;
    }
  }
  .tagnav {
    @include flex(center);
  }
  .body-conter {
    width: 960px;
    margin: auto;
    padding-top: 10px;
    @include flex(space-between, none);
    .body-wrap {
      width: 700px;
      background-color: #fff;
    }
    .body-rigth {
      width: 240px;
    }
  }
}
@media screen and (max-width: 960px) {
  .body-conter {
    width: 100% !important;
    .body-wrap {
      width: 100% !important;
    }
    .body-rigth {
      display: none;
    }
  }
}
</style>
